<template>
  <el-cascader
    :value="ids"
    :options="deptOptions"
    :props="option"
    clearable
    @change="onChange"
  ></el-cascader>
</template>

<script>
export default {
  name: "workorder_catalogue_cascader",
  props: {
    value: null,
    disabled: {
      type: Boolean,
      default: false,
    },
    needRootCatalog: {
      type: String,
      default: "N",
    },
    type: null,
    rootId: null,
    option: {
      type: Object,
      default: () => {
        return { checkStrictly: true,label: "name", value: "id" };
      },
    },
  },
  data() {
    return {
      id: undefined,
      ids: undefined,
      deptOptions: [],
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (newValue && newValue !== oldValue) {
          this.id = newValue || undefined;
          this.getIds();
        } else {
          this.id = undefined;
          this.ids = undefined;
        }
      },
      deep: true,
      immediate: true,
    },
    type(){
      this.id = undefined
      this.ids = undefined
      this.deptOptions = []
      this.loadTree()
    }
  },
  created() {
    this.loadTree();
  },
  methods: {
    getIdsItem(children) {
      let id = undefined;
      try {
        children.forEach((el) => {
          if (el.id === this.id) {
            id = el.id;
            throw new Error();
          } else if (el.children && el.children.length > 0) {
            const id_ = this.getIdsItem(el.children);
            if (id_) {
              id = `${el.id},${id_}`;
            }
          }
        });
      } catch (error) {}
      return id;
    },
    getIds() {
      if (this.deptOptions && this.deptOptions.length > 0 && this.id) {
        let ids_ = [];
        try {
          this.deptOptions.forEach((el) => {
            if (el.id === this.id) {
              ids_ = [this.id];
              throw new Error();
            } else if (el.children && el.children.length > 0) {
              const id_ = this.getIdsItem(el.children);
              if (id_) {
                const _id = `${el.id},${id_}`;
                ids_ = _id.split(",");
              }
            }
          });
        } catch (error) {}
        this.ids = ids_ || undefined;
      }
    },

    getItem(id, arr) {
      let item = null;
      try {
        arr.forEach((el) => {
          if (el.id === id) {
            item = el;
            throw new Error();
          }
        });
      } catch (error) {}
      return item;
    },
    onChange(e) {
      let item = null;
      if (e && e.length > 0) {
        e.forEach((el) => {
          item = this.getItem(el, item ? item.children : this.deptOptions);
        });
      }
      this.$emit("changeItem", item || {});
    },
    loadTree() {
      let _this = this;
      _this.$ajax({
        url: "/oms-api/tickets/OmsBaseTicketsCatalogRpc/getTicketsCatalogsByName.json",
        data: {
          needRootCatalog: _this.needRootCatalog,
          type: _this.type,
          rootId: _this.rootId,
        },
        success: (res) => {
          _this.deptOptions = res.data.rows;
          _this.getIds();
        },
      });
    },
  },
};
</script>
